<template>
	<view class="shop-cart">
		
		<template v-if="list.length > 0">
			<nav-bar title="购物车" 
			:rightText="isNavBar?'完成':'编辑'" 
			fixed="true"
			statusBar="true"
			@clickRight="isNavBar = !isNavBar"
			></nav-bar>
			<view class="shop-list">
				<view class="shop-item" v-for="(item,index) in list" :key="index">
					<label class="radio" @tap="selectedItem(index)">
						<radio value="" color="#ff3333" :checked="item.checked"/><text></text>
					</label>
					<image class="shop-img" :src="item.imgUrl" mode=""></image>
					<view class="shop-text">
						<view class="shop-name">
							{{item.name}}
						</view>
						<view class="shop-color f-color">
							颜色：{{item.color}}
						</view>
						<view class="shop-price">
							<view>￥{{item.pprice}}</view>
							
							<template v-if="!isNavBar">
								<view>数量：{{item.num}}</view>
							</template>
							<!-- 点击编辑后的样式 -->
							<template v-else>
								<!-- 重新对购物车的数量进行编辑 -->
								<!-- $even为输入的值  index -->
								<uni-nav-bar 
								:value="item.num" 
								:min="1"
								@change="changeNumber($event,index)"
								></uni-nav-bar>						
							</template>
							
						</view>
					</view>
				</view>
			</view>
			
			<!-- 底部 -->
			<view class="shop-foot">
				<label class="radio foot-radio" @tap="checkedAllFn">
					<radio value="" color="#ff3333" :checked="checkedAll"></radio><text>全选</text>
				</label>
				
				<template v-if="! isNavBar">
					<view class="foot-total">
						<view class="foot-count">合计: <text class="f-active-color">￥{{totalCount.pprice}}</text></view>
						<view class="foot-num">结算({{totalCount.num}})</view>
					</view>
				</template>
				<!-- 点击编辑后的样式 -->
				<template v-else>
					<view class="foot-total">
						<view class="foot-num" style="background-color: black;">移入收藏夹</view>
						<view class="foot-num" @tap="delGoodsFn">删除</view>
					</view>
				</template>
				
			</view>
		</template>
		
		<template v-else>
			<nav-bar title="购物车" statusBar="true" fixed="true"></nav-bar>
			<view class="shop-else-list">
				<text>空空如也</text>
			</view>
		</template>
	</view>
</template>

<script>
	import UniNavBar from "@/components/uui/uni-number-box/components/uni-number-box/uni-number-box.vue"
	import NavBar from "@/components/uui/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue"
	import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'
	export default {
		components:{
			NavBar,
			UniNavBar
		},
		data() {
			return {
				isNavBar:false,
				
			}
		},
		methods: {
			...mapActions(['checkedAllFn','delGoodsFn']),
			...mapMutations(['selectedItem']),
			changeNumber(value,index){
				this.list[index].num = value
			}
		},
		computed:{
			// 调用vuex中的列表信息
			...mapState({
				list:state=>state.cart.list
			}),
			...mapGetters(['checkedAll','totalCount'])
		}
	}
</script>

<style scoped>
.shop-list{
	padding-bottom: 100rpx;
}
.shop-item{
	
	display: flex;
	padding: 20rpx;
	align-items: center;
	background-color: #f7f7f7;
	margin-bottom: 10rpx;
}
.shop-text{
	flex: 1;
	padding-left: 20rpx;
}
.shop-img{
	
	width: 200rpx;
	height: 200rpx;
}
.shop-color{
	font-size: 24rpx;
}
.shop-price{
	display: flex;
	justify-content: space-between;
}

.shop-foot{
	background-color: wheat;
	position: fixed;
	bottom: 100rpx;
	width: 100%;
	height: 100rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.foot-radio{
	padding-left: 20rpx;
}
.foot-total{
	display: flex;
}
.foot-count{
	line-height: 100rpx;
	padding: 0 20rpx;
	font-size: 32rpx;
}
.foot-num{
	background-color: #49bdfb;
	color: #ffffff;
	padding:0 60rpx;
	line-height: 100rpx;
}

.shop-else-list{
	background-color: #f7f7f7;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>
